<template>
  <!-- 维修人员 页面 -->
  <view style="background-color: #f9f9f9;">
    <!--选项卡： 新任务，进行中，已完成 -->
    <view>
      <u-subsection :list="xuanXiangList" mode="subsection" :current="subCurrent" @change="xuanXiangChange">
      </u-subsection>
    </view>
    <!-- 滚动视图区域 -->
    <scroll-view class="left-scroll-view" scroll-y :style="{height: wh + 'px'}">
      <!-- 新报修list -->
      <view v-if="subCurrent===0" style="background-color: #f9f9f9;">
        <!-- item -->
        <my-weixiu-item :weixiu="item" v-for="(item,index) in newRepairList" :key="index" v-if="item.status==='新任务'">
        </my-weixiu-item>
      </view>
      <!-- 进行中list -->
      <view v-if="subCurrent===1">
        <!-- item -->
        <my-weixiu-item :weixiu="item" v-for="(item,index) in runningAndFinishRepairList" :key="index" v-if="item.status==='已接单'">
        </my-weixiu-item>
      </view>
      <!-- 已完成list -->
      <view v-if="subCurrent===2">
        <!-- item -->
        <my-weixiu-item :weixiu="item" v-for="(item,index) in runningAndFinishRepairList" :key="index" v-if="item.status==='已维修' || item.status==='已评价'">
        </my-weixiu-item>
      </view>
    </scroll-view>


    <!-- 自定义tabBar -->
    <view>
      <u-tabbar :value="tabBarIndex" :fixed="true" @change="tabBarchange" :placeholder="false" activeColor="#1296db"
        :safeAreaInsetBottom="false">
        <block v-for="(item,index) in tabBarList" :key="index">
          <u-tabbar-item :text="item.text">
            <image class="u-page__item__slot-icon" slot="inactive-icon" :src="item.iconPath"></image>
            <image class="u-page__item__slot-icon" slot="active-icon" :src="item.selectedIconPath"></image>
          </u-tabbar-item>
        </block>
      </u-tabbar>
    </view>
  </view>
</template>

<script>
  // 按需导入 mapState ,mapMutations,mapGetters 辅助函数
  import {
    mapState,
    mapMutations,
    mapGetters
  } from 'vuex'
  export default {
    data() {
      return {
        // 窗口的可用高度 = 屏幕高度 - navigationBar高度 - tabBar 高度
        wh: 0,
        subCurrent: 0, //新任务，进行中，已完成
        xuanXiangList: ['新任务', '进行中', '已完成'],
        newRepairList:[],//所有新任务  报修单
        runningAndFinishRepairList:[],// 所有该维修人员的  进行中和已完成 报修单
        weixiuList: [],
      };
    },
    onLoad() {
      // 获取 报修单信息
      this.getNewRepairList();
      this.getRunningAndFinishRepairList();
      // 获取当前系统的信息
      const sysInfo = uni.getSystemInfoSync()
      // 为 wh 窗口可用高度动态赋值   可用高度 = 屏幕高度 - navigationBar高度 - tabBar高度 - 自定义的search组件高度
      this.wh = sysInfo.windowHeight - 80
    },
    computed: {
      // 将 m_user 模块中的 userType 数据映射到当前页面中使用
      ...mapState('m_user', ['userType','userInfo']),
      ...mapState('m_tabbar', ['tabBarList', 'tabBarIndex']),
    },
    methods: {
      // 选择 上门or到店
      xuanXiangChange(index) {
        this.subCurrent = index
      },
      async getNewRepairList(cb){
        // ** 打开节流阀
        this.isloading = true
        const {data: res} = await uni.$http.get('/repair/getnewrepairlist')
        // ** 关闭节流阀
        this.isloading = false
        // 只要数据请求完毕，就立即按需调用 cb 回调函数,cb() 是关闭下拉刷新的
        cb && cb()
        if (res.status !== 200) return uni.$showMsg()
        this.newRepairList=res.data;
      },
      async getRunningAndFinishRepairList(cb){
        // ** 打开节流阀
        this.isloading = true
        const {data: res} = await uni.$http.post('/repair/getrunningandfinishrepairlist',this.userInfo.id)
        // ** 关闭节流阀
        this.isloading = false
        // 只要数据请求完毕，就立即按需调用 cb 回调函数,cb() 是关闭下拉刷新的
        cb && cb()
        if (res.status !== 200) return uni.$showMsg()
        this.runningAndFinishRepairList=res.data;
      },
      
      // 下拉刷新的事件
      onPullDownRefresh() {
        // 1. 重置关键数据
        this.isloading = false
        this.newRepairList = [];
        this.runningAndFinishRepairList=[];
        // 2. 重新发起请求   传参（关闭下拉刷新，因为默认不关闭）
        this.getNewRepairList(() => uni.stopPullDownRefresh())
        this.getRunningAndFinishRepairList(() => uni.stopPullDownRefresh())
      },
      
      // tabbar 相关方法
      ...mapMutations('m_tabbar', ['updateTabBarIndex']),
      tabBarchange(name) {
        uni.switchTab({
          url: this.tabBarList[name].pagePath
        })
        // uni.navigateTo({
        //   url: this.tabBarList[name].pagePath
        // })
        this.setTabBarIndex(name);
      },
      setTabBarIndex(index) {
        this.updateTabBarIndex(index);
      }
    }
  }
</script>

<style lang="scss">
.u-page {
    padding: 0;

    &__item {

      &__title {
        color: $u-tips-color;
        background-color: $u-bg-color;
        padding: 30rpx;
        font-size: 30rpx;

        &__slot-title {
          color: $u-primary;
          font-size: 30rpx;
        }
      }

      &__slot-icon {
        width: 70rpx;
        height: 70rpx;
      }
    }
  }
</style>
